<template>

  <div id="box" style="margin: auto;width: 70%">
  <el-card class="box-card">
    <div slot="header" class="clearfix" style="text-align: left;">
      <span style="left: auto">幸福一家人❤</span>
      <el-switch
          v-model="value1"
          active-text="所有人可见"
          inactive-text="仅自己可见">
      </el-switch>


      <el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/index')" >返回主页</el-button>
    </div>

    <div>
      <ul style="border: 1px solid red">

        <li class="imgs" style="width: 200px;margin: 10px"  v-for="(item,i) in content_top" :key="item">
          <img :src=content_top[i].src  width="200px">
        </li>

<!--        <li class="imgs" style="width: 200px;margin: 10px">-->
<!--          <img :src="require('@/assets/我.jpg')" width="200px">-->
<!--        </li>-->
<!--        <li class="imgs" style="width: 200px;margin: 10px">-->
<!--          <img :src="require('@/assets/etty.jpg')" width="200px">-->
<!--        </li>-->
<!--        <li class="imgs" style="width: 200px;margin: 10px">-->
<!--          <img :src="require('@/assets/我.jpg')" width="200px">-->
<!--        </li>-->
<!--        <li class="imgs" style="width: 200px;margin: 10px">-->
<!--          <img :src="require('@/assets/我1.jpg')" width="200px">-->
<!--        </li>-->
<!--        <li class="imgs" style="width: 200px;margin: 10px">-->
<!--          <img :src="require('@/assets/IMG_04942.jpg')" width="200px">-->
<!--        </li>-->
<!--        <li class="imgs" style="width: 200px;margin: 10px">-->
<!--          <img :src="require('@/assets/etty.jpg')" width="200px">-->
<!--        </li>-->



      </ul>

    </div>

  </el-card>
  </div>
</template>

<script>
export default {
  name: "album",
data(){
    return{
      content_top:[
        // {title:'照片1',src:require('./assets/IMG_01.jpg')}
      ]
    }
}
}





</script>

<style lang="scss">
#box{
  ul{
    overflow: hidden;
    list-style: none;
  }
.imgs{
  float: left;
  margin: 0 0 15px 15px;

}

}
</style>